<template>
  <!-- 增加修改 -->
  <a-drawer width="50%" :label-col="4" :wrapper-col="14" :visible="open" @close="onClose">
    <a-divider orientation="left">
      <b>{{ formTitle }}</b>
    </a-divider>
    <a-form-model ref="form" :model="form" :rules="rules" :layout="'horizontal'">
      <a-row :gutter="24">
        <a-col
          :span="12">
          <a-form-model-item label="过程卡号" prop="processCardNo">
            <a-input v-model="form.processCardNo" placeholder="请输入" />
          </a-form-model-item>
        </a-col>
        <a-col
          :span="12">
          <!-- externalBatchNumber -->
          <a-form-model-item label="工装类型" prop="toolingType">
            <a-select v-model="form.toolingType" :options="toolingTypeEnums" placeholder="请选择" @change="fillData">

            </a-select>
          </a-form-model-item>
        </a-col>
      </a-row>

      <a-row :gutter="24">
        <a-col
          :span="12">
          <a-form-model-item label="零件名称" prop="partName">
            <!-- <a-input v-model="form.partName" placeholder="请输入" /> -->
            <a-select
              v-model="form.partName"
              @change="selectInventor"
              placeholder="请选择"
            >
              <a-select-option v-for="(item) in inventoryItems" :key="item.id" :value="item.inventoryName">{{ item.inventoryName }}({{ item.inventoryCode }})</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>

        <a-col :span="12">
          <a-form-model-item label="零件图号" prop="partDrawingNo">
            <a-input v-model="form.partDrawingNo" placeholder="请输入" disabled />
          </a-form-model-item>
        </a-col>
      </a-row>

      <a-row :gutter="24">
        <a-col
          :span="12">
          <a-form-model-item label="成套工装名称" prop="completeToolingName">
            <a-input v-model="form.completeToolingName" placeholder="请输入" :disabled="form.toolingType == 0" />
          </a-form-model-item>
        </a-col>

        <a-col :span="12">
          <a-form-model-item label="成套工装图号" prop="completeToolingDrawingNo">
            <a-input v-model="form.completeToolingDrawingNo" placeholder="请输入" :disabled="form.toolingType == 0">
            </a-input></a-form-model-item>
        </a-col>
      </a-row>

      <a-row :gutter="24">
        <a-col
          :span="12">
          <a-form-model-item label="工装零件名称" prop="toolingPartName">
            <a-input v-model="form.toolingPartName" placeholder="请输入" />
          </a-form-model-item>
        </a-col>

        <a-col :span="12">
          <a-form-model-item label="工装零件图号" prop="toolingPartDrawingNo">
            <a-input v-model="form.toolingPartDrawingNo" placeholder="请输入" />
          </a-form-model-item>
        </a-col>
      </a-row>

      <a-row :gutter="24">
        <a-col
          :span="12">
          <a-form-model-item label="生产数量" prop="processingQuantity">
            <a-input v-model="form.processingQuantity" placeholder="请输入" />
          </a-form-model-item>
        </a-col>

        <a-col :span="12">
          <a-form-model-item label="文件来源" prop="fileSource	">
            <!-- <a-input v-model="form.fileSource	" placeholder="请输入" /> -->

            <a-select
              show-search
              placeholder="请选择"
              v-model="form.fileSource"
            >
              <a-select-option :value="item.nickName" v-for="(item, key) in opeUsers " :key="key">
                {{ item.nickName }}
              </a-select-option>
            </a-select>
          </a-form-model-item>

        </a-col>
      </a-row>

      <a-row :gutter="24">
        <a-col
          :span="12">
          <a-form-model-item label="下发时间" prop="createTime">
            <a-input v-model="form.createTime" placeholder="请输入" disabled/>
          </a-form-model-item>
        </a-col>

        <a-col :span="12">
          <a-form-model-item label="签发人" prop="createBy">
            <a-input v-model="nickname" placeholder="请输入" disabled />
          </a-form-model-item>
        </a-col>
      </a-row>

      <a-row :gutter="24">
        <a-form-model-item label="备注" prop="remark">
          <a-input type="textarea" v-model="form.remark" placeholder="请输入" />
        </a-form-model-item>
      </a-row>

      <a-divider />

      <!-- 加工工序 -->
      <a-row :gutter="24" class="action-bar">
        <a-space>
          <span>加工工序</span>
          <a-button type="primary" class="editable-add-btn" @click="addProcessSteps">
            新增
          </a-button>
        </a-space>
      </a-row>

      <a-row :gutter="24">
        <a-table bordered :data-source="form.processSteps" :columns="processStepsColumns" size="small" :pagination="false">
          <!-- 序号列插槽 -->
          <template slot="indexSlot" slot-scope="text, record, index">
            {{ index + 1 }}
          </template>

          <template slot="stepName" slot-scope="text, record">
            <a-input :value="text" @change="e=>handleChange(e.target.value, record, 'stepName')"/>
          </template>

          <template slot="prepareHours" slot-scope="text, record">
            <a-input :value="text" @change="e=>handleChange(e.target.value, record, 'prepareHours')"/>
          </template>

          <template slot="clampingHours" slot-scope="text, record">
            <a-input :value="text" @change="e=>handleChange(e.target.value, record, 'clampingHours')"/>
          </template>

          <template slot="singlePieceHours" slot-scope="text, record">
            <a-input :value="text" @change="e=>handleChange(e.target.value, record, 'singlePieceHours')"/>
          </template>

          <template slot="inspectionHours" slot-scope="text, record">
            <a-input :value="text" @change="e=>handleChange(e.target.value, record, 'inspectionHours')"/>
          </template>

          <!-- :show-time="{ defaultValue: dayjs('00:00:00', 'HH:mm:ss') }" -->
          <template slot="action" slot-scope="text, record">
            <a href="javascript:;" @click="handleDelete(record)" >删除</a>
          </template>
        </a-table>

      </a-row>

      <div class="bottom-control">
        <a-space>
          <a-button type="primary" :loading="submitLoading" @click="submitForm">
            保存
          </a-button>
          <a-button type="dashed" @click="cancel">
            取消
          </a-button>
        </a-space>
      </div>
    </a-form-model>
  </a-drawer>
</template>

<script>

import { list as inventoryItemList } from '@/api/baseData/inventory'
import { add, getById, update } from '@/api/production/process'

import { listAll } from '@/api/system/user'
import { mapGetters } from 'vuex'
import dayjs from 'dayjs'
import customParseFormat from 'dayjs/plugin/customParseFormat'

export default {
  name: 'CreateForm',
  props: {

  },
  components: {
  },
  data () {
    dayjs.extend(customParseFormat)
    return {
      submitLoading: false,
      formTitle: '',
      // 表单参数
      form: {
        id: undefined,
        processCardNo: '',
        toolingType: '',
        partName: '',
        partDrawingNo: '',
        completeToolingName: '',
        completeToolingDrawingNo: '',
        toolingPartName: '',
        toolingPartDrawingNo: '',
        processingQuantity: '',
        fileSource: '',
        createTime: new Date(),
        createBy: '',
        remark: '',
        processSteps: []
      },
      open: false,
      rules: {
        processCardNo: [
          { required: true, message: '过程卡号不能为空', trigger: 'blur' }
        ]
      },
      toolingTypeEnums: [
        { value: 1, label: '工装零件' },
        { value: 2, label: '成套工装' },
        { value: 3, label: '成套电极' }
      ],
      processStepsColumns: [
      {
        title: '序号',
        key: 'index',
        scopedSlots: { customRender: 'indexSlot' }, // 索引从0开始，+1后从1显示
        width: 80,
        align: 'center'
      },
        {
          title: '工序名称',
          dataIndex: 'stepName',
          ellipsis: true,
          scopedSlots: { customRender: 'stepName' },
          width: 80
        },
        {
          title: '准备工时',
          dataIndex: 'prepareHours',
          scopedSlots: { customRender: 'prepareHours' },
          ellipsis: true,
          width: 80
        },
        {
          title: '装夹工时',
          dataIndex: 'clampingHours',
          ellipsis: true,
          scopedSlots: { customRender: 'clampingHours' },
          width: 80
        },
        {
          title: '单件工时',
          dataIndex: 'singlePieceHours',
          scopedSlots: { customRender: 'singlePieceHours' },
          ellipsis: true,
          width: 80
        },
        {
          title: '检验工时',
          dataIndex: 'inspectionHours',
          ellipsis: true,
          scopedSlots: { customRender: 'inspectionHours' },
          width: 80
        },
        {
          title: '操作',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' },
          width: 50
        }

      ],
      inventoryItems: [],
      inventory: '',
      opeUsers: []
    }
  },
  filters: {
  },
  created () {
    this.getInventoryItemList()
    this.getOperator()
  },

  computed: {
    ...mapGetters([
      'avatar',
      'nickname'
    ])
  },
  watch: {

  },
  methods: {
    dayjs, // 将 dayjs 作为方法暴露给模板
    getOperator () {
      listAll().then(res => {
        this.opeUsers = res.data
        console.info(res, '员工')
      })
    },
    // 设置table form 值
    handleChange (e, info, ee) {
      console.info(e, info, ee)
      // info[ee] = e
      this.$set(info, ee, e)
    },
    selectInventor (value) {
      this.inventory = this.inventoryItems.filter(f => f.inventoryName === value)[0]
      console.info(this.inventory, value, '444')
      this.form.partDrawingNo = this.inventory.inventoryCode
      this.fillData()
    },
    fillData () {
      console.info(this.form.toolingType, this.inventory, '0000')
      if (this.form.toolingType === 1) {
        if (this.inventory) {
          this.form.completeToolingName = this.inventory.inventoryName
          this.form.completeToolingDrawingNo = this.inventory.inventoryCode
        }
      }
    },
    getInventoryItemList () {
      inventoryItemList({}).then(res => {
        this.inventoryItems = res.data
      })
    },
    onClose () {
      this.open = false
    },
    // 取消按钮
    cancel () {
      this.open = false
      this.reset()
    },
    addProcessSteps () {
      this.form.processSteps.push({
        stepName: '',
        prepareHours: '',
        clampingHours: '',
        singlePieceHours: '',
        inspectionHours: ''
      })
    },
    // 表单重置
    reset () {
      this.form = {
        processCardNo: '',
        toolingType: '',
        partName: '',
        partDrawingNo: '',
        completeToolingName: '',
        completeToolingDrawingNo: '',
        toolingPartName: '',
        toolingPartDrawingNo: '',
        processingQuantity: '',
        fileSource: '',
        createTime: '',
        createBy: '',
        remark: '',
        processSteps: [],
        projectId: ''
      }
    },
     /** 新增按钮操作 */
    handleAdd (selectProjectId) {
      if (!selectProjectId) {
        this.$message.error(
                '请先选择项目',
                3
              )
        return
      }
      this.reset()
      this.open = true
      this.formTitle = '工装、电极加工过程卡'

      this.form = {
        processCardNo: '',
        toolingType: '',
        partName: '',
        partDrawingNo: '',
        completeToolingName: '',
        completeToolingDrawingNo: '',
        toolingPartName: '',
        toolingPartDrawingNo: '',
        processingQuantity: '',
        fileSource: '',
        createTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
        createBy: '',
        remark: '',
        processSteps: [],
        projectId: selectProjectId,
        status: 0
      }
    },
    /** 修改按钮操作 */
    handleUpdate (row, ids) {
      this.reset()
      console.info(row, 'sss')
      this.form = row
      this.formTitle = '工装、电极加工过程卡'
      getById(row.id).then(res => {
        console.info(res, '555')
        this.form = { ...res.data, status: 1 }
      })
      this.open = true
    },
    /** 提交按钮 */
    submitForm: function () {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.submitLoading = true
          if (this.form.id !== undefined) {
            update(this.form).then(response => {
              this.$message.success(
                '修改成功',
                3
              )
              this.open = false
              this.$emit('ok')
            }).finally(() => {
              this.submitLoading = false
            })
          } else {
            add(this.form).then(response => {
              this.$message.success(
                '新增成功',
                3
              )
              this.open = false
              this.$emit('ok')
            }).finally(() => {
              this.submitLoading = false
            })
          }
        } else {
          return false
        }
      })
    }
  }
}
</script>
